<template>
  <basic-container>
    <div class="repair-query-container">
      <el-row>
        <el-col span="6">
          <div class="avue-group__header avue-group">
            <i class="el-icon-vertical-bar avue-group__icon"></i>
            <h1 class="avue-group__title">维修用料</h1>
          </div>
          <avue-form ref="properties" v-model="properties" :option="propertiesOption" @submit="handleSubmit">
            <!--            <template slot-scope="{ size }" slot="menuForm">-->
            <!--              <el-button type="success" size="small" icon="el-icon-upload2" @click="handleImportData">导入</el-button>-->
            <!--            </template>-->
          </avue-form>
        </el-col>
        <el-col span="18">
          <div class="avue-group__header avue-group">
            <i class="el-icon-vertical-bar avue-group__icon"></i>
            <h1 class="avue-group__title">维修用料信息</h1>
          </div>
          <avue-crud
            :option="option"
            :table-loading="loading"
            v-model="form"
            :data="data"
            :page.sync="page"
            :search.sync="query"
            :before-open="beforeOpen"
            ref="crud"
            @row-del="rowDel"
            @search-change="searchChange"
            @search-reset="searchReset"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
          >
            <template slot="menuLeft">
              <el-button type="primary" size="small" plain icon="el-icon-download" @click="handleExport">导出 </el-button>
            </template>
          </avue-crud>
        </el-col>
      </el-row>
    </div>
    <export-comp
      ref="exportComp"
      page-api-url="mes-product/mro/refueling/page?isFlagJL=true"
      :option="option"
      :page="page"
      :query="exportParams"
      file-name="维修用料信息导出"
    ></export-comp>
  </basic-container>
</template>

<script>
import { getInfoBySn, getInfoByTrackNo, getList, remove, submit } from '@/api/repair/repairQuery';
import exportComp from '@/components/export-comp';
import { filterEmptyValues } from '@/util/util';

export default {
  name: 'repairQuery',
  components: {
    exportComp
  },
  data() {
    return {
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      exportParams: {},
      query: {},
      data: [],
      loading: false,
      form: {},
      option: {
        calcHeight: 30,
        height: '400px',
        tip: false,
        searchShow: true,
        searchMenuSpan: 24,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        delBtn: true,
        addBtn: false,
        indexLabel: '序号',
        columnBtn: false,
        searchLabelWidth: 110,
        searchMenuPosition: 'right',
        column: [
          {
            label: '产品序列号',

            prop: 'oldSn',
            search: true
          },
          {
            label: '工单号',
            prop: 'workOrderNo',
            search: true
          },
          {
            label: '产品编码',
            prop: 'oldPartNo',
            search: true
          },
          {
            label: '产品名称',
            prop: 'oldPartName',
            search: true
          },
          {
            label: '产品型号',
            prop: 'oldPartModel'
          },
          {
            label: '换料位号',
            prop: 'trackNo'
          },
          {
            label: '物料编码',
            prop: 'newPartNo',
            search: true
          },
          {
            label: '物料名称',
            prop: 'newPartName',
            search: true
          },
          {
            label: '维修用量',
            prop: 'quantity'
          },
          {
            label: '领料说明',
            prop: 'remark'
          },
          {
            label: '录入时间',
            prop: 'createTime',
            search: true,
            searchSpan: 8,
            type: 'datetime',
            search: true,
            searchType: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
          }
        ]
      },
      properties: {},
      propertiesOption: {
        submitText: '录入',
        labelWidth: 130,
        menuSpan: 20,
        column: [
          {
            label: '产品序列号',
            prop: 'oldSn',
            span: 24,
            rules: [{ required: true, message: '请输入产品序列号', trigger: 'blur' }],
            enter: async (value) => {
              await this.getPartInfoBySn(value);
            }
          },
          {
            label: '工单号',
            prop: 'workOrderNo',
            disabled: true,
            span: 24
          },
          {
            label: '产品编码',
            prop: 'oldPartNo',
            disabled: true,
            span: 24
          },
          {
            label: '产品名称',
            prop: 'oldPartName',
            disabled: true,
            span: 24
          },
          {
            label: '产品型号',
            prop: 'oldPartModel',
            disabled: true,
            span: 24
          },
          {
            label: '换料位号',
            prop: 'trackNo',
            span: 24,
            rules: [{ required: true, message: '请输入换料位号', trigger: 'blur' }],
            enter: async (value) => {
              await this.getPartInfoTrackNo(value);
            }
          },
          {
            label: '物料编码',
            prop: 'newPartNo',
            disabled: true,
            span: 24
          },
          {
            label: '物料名称',
            prop: 'newPartName',
            disabled: true,
            span: 24
          },
          {
            label: '维修用量',
            prop: 'quantity',
            type: 'number',
            span: 24,
            rules: [
              { required: true, message: '请输入维修用量', trigger: 'blur' },
              // 校验正整数
              { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
            ]
          },
          {
            label: '领料说明',
            prop: 'remark',
            span: 24
          }
        ]
      }
    };
  },
  methods: {
    async getPartInfoBySn(val) {
      const res = await getInfoBySn(val);
      const data = res.data.data;
      if (!data) {
        this.$message.warning('暂无数据，请核对产品序列号是否正确');
      } else {
        this.properties.productPartNo = this.properties.oldPartNo = data.partNo;
        this.properties.productPartName = this.properties.oldPartName = data.partName;
        this.properties.oldPartModel = data.partModel;
        this.properties.productId = data.id;
        this.properties.productSn = val;
        this.properties.workOrderNo = data.workOrderNo;
        this.properties.workOrderId = data.workOrderId;
      }
    },
    async getPartInfoTrackNo(val) {
      const params = {
        partNo: this.properties.oldPartNo,
        positionNo: val
      };
      const res = await getInfoByTrackNo(params);
      const data = res.data.data;
      if (!data.length) {
        this.$message.warning('暂无数据，请核对换料位号是否正确');
      } else {
        this.properties.newPartNo = data[0].partNo;
        this.properties.newPartName = data[0].partName;
      }
    },
    async handleSubmit(form, done) {
      const params = this._cloneDeep(this.properties);
      params.isFlagJL = true;
      try {
        const res = await submit(params);
        this.$message.success('录入成功');
        this.$refs.properties.resetForm();
        this.onLoad(this.page);
      } catch (e) {
        console.warn(e);
      }
      done();
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
    },
    beforeOpen(done, type) {},
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      if (params.createTime) {
        params.queryStartTime = params.createTime[0];
        params.queryEndTime = params.createTime[1];
        delete params.createTime;
      }
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    handleExport() {
      this.exportParams = filterEmptyValues(this.query);
      this.$refs.exportComp.visible = true;
    },
    async onLoad(page, params = {}) {
      console.log(this.query);
      this.loading = true;
      try {
        const res = await getList(page.currentPage, page.pageSize, Object.assign(params, this.query));
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
      } catch (e) {
        console.warn(e);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.repair-query-container {
  height: 82vh;
  margin: 0 12px;
}
</style>
